<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog ref="editDialog" v-model="openFlag" title="申请" width="50%" append-to-body>
      <el-form ref="form" :model="form" class="dialog-form-two">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
              type="primary"
              plain
              icon="Search"
              @click="handleChoose"
          >选择资产</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableData.loading" :data="tableData.list">

        <el-table-column label="名称" prop="name">
          <template #default="scope">
            <el-input placeholder="请输入" v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="品牌" prop="brand">
          <template #default="scope">
            <el-input placeholder="请输入" v-model="scope.row.brand"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="型号" prop="model">
          <template #default="scope">
            <el-input placeholder="请输入" v-model="scope.row.model"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template  #default="scope">
            <el-link
                       size="primary"
                       @click="handleDelete(scope)"
            >删除</el-link>

          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" @click="sub">提交</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-row>

      </div>
    </el-dialog>

    <choose-dialog ref="chooseDialog" @sub="onChooseSub"></choose-dialog>

  </div>
</template>

<script>

import UserSelect from "@/components/User/UserSelect.vue";
import ChooseDialog from "@/components/Asset/ChooseDialog.vue";
import api from "./api.js";

const emptyItem = {
  number: null,
  num: 1,

}

export default {
  components: {ChooseDialog, UserSelect},
  props: {
  },
  data() {
    return {
      openFlag: false,
      tableData: {
        loading: false,
        list: []
      },
      deletedItem: [],
      // 表单参数
      form: {
        targetUserId: null,
        remark: null
      },
    }
  },
  methods: {
    open({actionType, row}) {
      this.openFlag = true;
      this.reset();
      this.actionType = actionType;
      if (actionType === 'edit') {
        api.detail(row).then(response=> {
          Object.assign(this.form, response);
          this.tableData.list = response.relItems;
        })
      }
    },
    close() {
      this.openFlag = false;
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.close();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        number: null,
        name: null,
        categoryId: null,
        categoryName: null,
        rfid: null,
        brand: null,
        model: null,
        buyWay: null,
        buyTime: null,
        buyPrice: null,
        adminId: null
      };
    },
    handleChoose() {
      this.$refs.chooseDialog.open();
    },
    handleDelete({ row, $index }) {
      // 如果是编辑状态需要把删除的行存起来
      if (this.actionType === 'edit') {
        this.deletedItem.push(row);
      }
      this.tableData.list.splice($index, 1);
    },
    /** 提交按钮 */
    save: function () {
      const apply = {
        apply: this.form,
        items: this.tableData.list,
        itemsDel: this.deletedItem
      }
      api.save(this.actionType, apply).then(response => {
        this.$emit("sub");
        this.close();
      });
    },
    sub: function () {
      const apply = {
        apply: this.form,
        items: this.tableData.list,
        itemsDel: this.deletedItem
      }
      api.saveAndSub(this.actionType, apply).then(response => {
        this.$emit("sub");
        this.close();
      });
    },
    onChooseSub(selected) {
      if (selected) {
        selected.forEach((item)=> {
          let row = {...item};
          row.sourceId = row.id;
          delete row.id;
          this.tableData.list.push(row);
        })
      }
    }
  },

}


</script>

